<template>
	<view  class="jsfun-record">
	 <!-- 多选控件 -->
	 <view class="conbox record pickerShow">	
		<!-- 此处可放置倒计时，可根据需要自行添加 -->
		<view class="time"> 
			正在录音: {{showRecordTime}}
		</view>
		<view class="record-box">
			<!-- 播放 -->
			<view class="stop" @touchstart.stop="stopVoice" v-if="playing==1"></view>
			<!-- 暂停 -->
			<view class="paly" @touchstart.stop="playVoice" v-if="playing==0"></view>
			
			<view class="luyin"></view>
			<!-- 保存 -->
			<view class="confirm" @touchstart.stop="okClick"></view>
		</view>
	 </view>
	</view>
</template>
<script>	
	const recorderManager = uni.getRecorderManager();//录音
	export default {
		name: 'jsfun-record',	
		data() {
			return {				
				voicePath: '',//地址
				recordTime:0,//录音时长
				playing:0,//暂停0播放1
				first:true,//是否是点击第一次
			}
		},
		computed: {
			showRecordTime() {
				var strs = "";
				var m = Math.floor(this.recordTime/60);
				if(m<10) strs = "0"+m;
				
				var s = this.recordTime%60;
				strs += (s<10) ? ":0"+s : ":"+s;				
				return strs
			}
		},
		watch: {
			
		},
		onLoad() {
			var _this = this;
			//获取录音权限
			uni.authorize({
				scope: 'scope.record',
				success() {
				}
			})	
			//录音停止事件
			recorderManager.onStop(function (res) {
				console.log('recorder stop' + JSON.stringify(res));
				_this.voicePath = res.tempFilePath;
			});	
			//开始事件
			recorderManager.onStart(function () {
				console.log('开始')
			});
			//暂停事件
			recorderManager.onPause(function(){
				console.log('暂停')
			});
		},
		methods: {					
			//点击确定
			okClick(){
				if(this.first){
					uni.showToast({
						title:"请先录音",
						icon:"none"
					})
					return false
				}
				clearInterval(this.timeObj);
				recorderManager.stop();
				var res = {
					path: this.voicePath,
					time: this.recordTime
				}
				this.$emit('okClick',res)
			},
			// start: function() {
			// 	console.log('12')
			// 	this.stopVoice();
			// 	this.voicePath = "";//音频地址				
			// 	this.recordTime = 0;			
			// },
			end: function() {
				let recordTime =  this.recordTime;
				
				clearTimeout(this.timeObj); //清除计时器
				this.recordTime = 0;//清除计时
				
				if(recordTime < 5 ){					
					if (recordTime<=0) { 
						return false;
					}					
					//==小于5秒==;
					uni.showToast({
						title:"不能小于5秒,请重新录制",
						icon:"none"
					})
					return false;
				} 				
				recorderManager.pause();	
			},
			record: function() {
				let _this = this;
				if(_this.first){		
					// 开始录音
					recorderManager.start();	
					_this.first = false
				}
				_this.timeObj = setInterval(function() {
					_this.recordTime ++;		
					//if(_this.recordTime  == _this.maxTime) _this.end();
				},1000);
			},
			playVoice() {
				// 开始录音
				this.record()
				if (!this.first) {
					recorderManager.resume();
					this.playing = 1;
				}
			},
			stopVoice() {
				clearInterval(this.timeObj);
				recorderManager.pause();
				this.playing = 0;			
			}	
		}
	}
</script>

<style lang="scss">
	.jsfun-record {

       .mask {
		  // position: absolute;
		  z-index: 1000;
		  // top: 0;
		  // right: 0;
		  // left: 0;
		  // bottom: 0;
		  background: rgba(0, 0, 0, 0.6);
		}

        .conbox{
			transition: all .3s ease;
			transform: translateY(100%);
			&.pickerShow{
			   transform:translateY(0);
			} 
			
			// position: fixed;
			z-index: 998;
			// right: 0;
			// left: 0;
			// bottom: 0;
			// background: #fff;
		}
		
		.c666{color:#666;}
		.c999{color:#999;}
		.fz28{font-size: 28upx;}
		.fz32{font-size: 32upx;}
		
		
        .record{		
			text-align: center;
			
			.time {
				text-align: center;
				font-size: 30upx;
				color:rgba(153,153,153,1);
				margin-top:20upx;
			}
			.domess{margin-bottom:20upx;font-size: 13px;}
			
			
			.record-box {
				display: flex;
				// flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			.btncom{
				margin-top: 70upx;
				width: 80upx;
				height: 80upx;	
				border-radius: 80upx;
			}
			.luyin{
				@extend .btncom;
				background:url(../../static/img/practice/kaishiluyin@3x.png) no-repeat;
				background-size: 100% 100%;
				margin-top: 15px;
				margin: 10px 30px;
			}
			.stop{
				 @extend .btncom;
				background:url(../../static/img/practice/zanting@3x.png) no-repeat;
				background-size: 100% 100%;
				margin-top: 0px;
			}
			.paly{
				 @extend .btncom;
				background:url(../../static/img/practice/kaishi@3x.png) no-repeat;
				background-size: 100% 100%;
				margin-top: 0px;
			}			
			.confirm{
				 @extend .btncom;
				background:url(../../static/img/practice/wancheng@3x.png) no-repeat 100% 100%;
				background-size: 100% 100%;
				margin-top: 0px;
			}
			
			
		} 

	}
</style>